<meta charset="utf-8" />
<div class="breadcrumbs" id="breadcrumbs">
    <ul class="breadcrumb">
        <li><i class="ace-icon fa fa-home home-icon"></i> <a href="index">系统管理</a>
        </li>
        <li><span>客户数据管理</span></li>
    </ul>
</div>

<div class="page-content">
    <div class="row">
        <div class="col-xs-12">
            <div class="clearfix"></div>
            <div class="table-header">客户数据管理</div>
            <div>
                <div id="dynamic-table_wrapper"
                     class="dataTables_wrapper form-inline no-footer">
                    <div class="row">
                        <div class="widget">
                            <div class="widget-main">
                                <form class="form-inline" id="selefrom" action="khsjgl/"
                                      method="post">
                                    <input type="search" style="width:120px;height:30px "
                                           ; class="form-control input-sm" placeholder="输入查询内容"
                                           aria-controls="dynamic-table" name="selevalue" id="hhh1">
                                    <select name="seletype" aria-controls="dynamic-table"
                                            style="height:30px " ; class="form-control">
                                        <option value="option_khbm">客户编码</option>
                                        <option value="option_phone">客户电话</option>
                                        <option value="operation_chmc">客户名称</option>
                                    </select>
                                    <button id="selectfromsb" style="height:30px "
                                            class="btn btn-info btn-sm">查询</button>
                                    <button id="selectfromcz" style="height:30px "
                                            class="btn btn-info btn-sm">重置</button>
                                </form>
                                <div class="pull-right">
								<a class="btn btn-sm btn-primary" href="javascript:addKhData()">添加用户</a>
							    </div>
                            </div>
                            
                        </div>
                    </div>
                    <table
                            class="table table-striped table-bordered table-hover dataTable no-footer DTTT_selectable"
                            id="dynamic-table" role="grid"
                            aria-describedby="dynamic-table_info">
                        <thead>
                        <tr role="row">
                            <th>客户编码</th>
                            <th>客户名称</th>
                            <th>联系方式</th>
                            <th>负责人</th>
                            <th>客户地址</th>
                            <th>客户邮编</th>
                            <th>客户等级</th>
                            <th>备注</th>
                            <th width="80px">操作</th>
                        </tr>
                        </thead>

                        <tbody id="khpage">
                        </tbody>

                    </table>
                    <div class="row">
                        <div class="col-xs-12 col-md-12">
                            <div class=" pull-left">
                                <label>显示<select name="dynamic-table_length"
                                                 aria-controls="dynamic-table" class="form-control input-sm"
                                                 id="sel"><option value="10">10</option>
                                    <option value="20">20</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                </select> 条记录</label>
                            </div>

                            <div class="dataTables_paginate paging_simple_numbers ">
                                <ul class="pagination" id="dynamic-table_paginate111">
                                </ul>
                                <div class="dataTables_paginate paging_simple_numbers">
                                    <div class="laypage_main laypageskin_molv" id="laypage_3">
                                        <span class="laypage_curr" style="background-color:#2283C5">1</span><span
                                            class="laypage_total"><label>到第</label><input max="1"
                                                                                          min="1" class="laypage_skip" type="number"><label>页</label>
											<button type="button" class="laypage_btn">
												确定
												<tton>
										</span>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="js/laypage.js"></script>
<!--添加客户数据-->
<div class="hide" id="add">
	<div class="col-xs-1"></div>
	<div class="col-xs-9">
		<form id="pform" method="post">
			<div class="form-group">
				<label class="col-sm-4 control-label no-padding-right"
					for="form-field-1">客户名称</label>
				<div class="col-sm-8">
					<input type="text" class="form-control" name="khmc" id="addkhmc"
						value="" />
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-4 control-label no-padding-right"
					for="form-field-1">联系方式</label>
				<div class="col-sm-8">
					<input type="text" class="form-control" name="lxfs"
						id="addlxfs" value="" />
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-4 control-label no-padding-right"
					for="form-field-1">负责人</label>
				<div class="col-sm-8">
					<input type="text" class="form-control" name="fzr" id="addfzr"
						value="" />
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-4 control-label no-padding-right"
					for="form-field-1">客户地址</label>
				<div class="col-sm-8">
					<input type="text" class="form-control" name="fzr" id="addkhdz"
						value="" />
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-4 control-label no-padding-right"
					for="form-field-1">客户邮编</label>
				<div class="col-sm-8">
					<input type="text" class="form-control" name="khyb" id="addkhyb"
						value="" />
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-4 control-label no-padding-right"
					for="form-field-1">客户等级</label>
				<div class="col-sm-8">
					<select name="khdj" id="addkhdj">
						<option value="一级">一级</option>
						<option value="二级">二级</option>
						<option value="三级">三级</option>
						<option value="特级">特级</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-4 control-label no-padding-right"
					for="form-field-1">备注</label>
				<div class="col-sm-8">
					<textarea rows="3" cols="20" class="form-control" name="bz" id="addbz" value="">
					</textarea>
				</div>
			</div>
		</form>
	</div>
	<div class="col-xs-2"></div>
</div>
<!-- 更改每页显示数据的数目 -->
<!--<script type="text/javascript">
    var sel = document.getElementById("sel");
    sel.onchange = function() {
        /* alert(sel.options[sel.selectedIndex].value); */
        $.post("khsjgl/gghs", {
            "pagen" : sel.options[sel.selectedIndex].value
        }, function(data) {
            pagedemo(1);
        });
    }
</script>-->

<script type="text/javascript">
    pagedemo(1);
    function pagedemo(n) {

        $.post("khsjgl/pagedemo", {
            "pageNumber" : n,
            "pch" : $("#pch").val()
        }, function(data) {
            pack(data.list); //调用上面pack()方法，填充表格数据

            if (data.totalPage == 1) {
                $("#dynamic-table_paginate111").addClass("hide");
                $("#laypage_3").removeClass("hide");
            } else {
                $("#laypage_3").addClass("hide");
                $("#dynamic-table_paginate111").removeClass("hide");
                laypage({
                    cont : $('#dynamic-table_paginate111'), //容器。值支持id名、原生dom对象，jquery对象,
                    pages : data.totalPage, //总页数
                    skip : true, //是否开启跳页
                    skin : '#2283C5',//保持ace中间的样式
                    first : 1,
                    last : data.totalPage, //总页数，将尾页显示为总页数
                    curr : data.pageNumber,//当前页
                    groups : 5, //连续显示分页数
                    jump : function(obj, first) {
                        if (!first) { //一定要加此判断，否则初始时会无限刷新
                            pagedemo(obj.curr);
                        }
                    }
                });
            }

        });
    }

    function pack(data) { //填充数据
        var dataStr = "";
        $.each(data, function(i, v) {
            dataStr += packlist(v);
        });
        $("#khpage").html(dataStr);
    }

    function packlist(v) {
        var dataStr = "";
        dataStr += '<tr>';
        dataStr += '<td>' + v.khbm + '</td>';
        dataStr += '<td>' + v.khmc + '</td>';
        dataStr += '<td>' + v.lxfs + '</td>';
        dataStr += '<td>' + v.fzr  + '</td>';
        dataStr += '<td>' + v.khdz + '</td>';
        dataStr += '<td>' + v.khyb + '</td>';
        dataStr += '<td>' + v.khdj + '</td>';
        dataStr += '<td>' + v.bz + '</td>';
        dataStr += '<td><div class="hidden-sm hidden-xs action-buttons">';
		dataStr += '<a href="javascript:updateKhData('+v.id+'\',\''+v.khbm+'\',\''+v.khmc+'\',\''+v.lxfs+'\',\''+v.fzr+'\',\''+v.khdz+'\',\''+v.khyb+'\','+v.khdj+',\''+v.bz+'\')"';
		dataStr += ' class="green"><i class="ace-icon fa fa-pencil bigger-130"></i> </a> <a href="javascript:deleteKh('+v.id+')" class="red"> <i class="ace-icon fa fa-trash-o bigger-130"></i> </a></div>'; 
		dataStr += '</td>';
		dataStr += '</tr>';
        return dataStr;
    };

    /* 撤销查询 */
    $("#selectfromcz").click(function() {
        document.getElementById("hhh1").value = "";
        $.post("khsjgl/sele", $("#selefrom").serialize(), function(data) {
            pagedemo(1);
        })
        return false;
    });

    /* 查询 */
    $("#selectfromsb").click(function() {
        $.post("khsjgl/sele", $("#selefrom").serialize(), function(data) {
            pagedemo(1);
        })
        return false;
    });

    //错误提示(传入错误信息)
    function errorMsg(errorInfo) {
        layer.confirm(errorInfo, {
            btn : [ '确定' ]
            //按钮
        }, function(index) {
            layer.close(index);
        });
    }
</script>
<!--
	作者：zhang10092009@hotmail.com
	时间：2017-08-23
	描述：添加客户数据
-->
<script type="text/javascript">
	function addKhData() {
		document.getElementById("pform").reset();
		$('#add').removeClass("hide");
		userModel = layer.open({
			type : 1,
			shade : [ 0.5 ],
			title : '客户数据添加', //不显示标题
			area : [ '40%', '80%' ], //显示空间
			content : $('#add'), //捕获的元素
			btn : [ '添加', '取消' ],
			yes : function(index, layero) { //或者使用btn1
				var khmc = document.getElementById("addkhmc").value;//客户名称
				var lxfs = document.getElementById("addlxfs").value;//客户联系方式
				var fzr = document.getElementById("addfzr").value;//客户负责人
				var khdz = document.getElementById("addkhdz").value;//客户地址
				var khyb = document.getElementById("addkhyb").value;//客户邮编
				var khdj = document.getElementById("addkhdj").value;//客户等级
				var bz = document.getElementById("addbz").value;//备注
				
				if(khmc==""){
					errorMsg("客户名不能为空");
					return false;
				}
				if(lxfs==""){
					errorMsg("客户联系方式不能为空");
					return false;
				}
				if(fzr==""){
					errorMsg("客户负责人不能为空");
					return false;
				}
				if(khdz==""){
					errorMsg("客户地址不能为空");
					return false;
				}
				if(khyb==""){
					errorMsg("客户邮编不能为空");
					return false;
				}
				var ybreg = /^[1-9]\d{5}$/
				if(!ybreg.test(khyb)){
					errorMsg("请输入正确的邮编");
					return false;
				}
				if(khdj==""){
					errorMsg("客户等级手动选择");
					return false;
				}
				$.post("khsjgl/addClientDate", $("#pform").serialize(), function(data) {
					if(data=="fail"){
						errorMsg("该客户已经存在，请核对后在输入");
						//return false;
					}else{
						layer.close(index);
						$('#add').addClass("hide");
						pageChange(1);
						layer.msg("添加成功");
					}
					//document.getElementById("pform").submit();
				});
			},
			cancel : function(index) {
				layer.close(index);
				$('#add').addClass("hide"); //取消继续隐藏
				layer.msg("已取消");
			},
		});
	};
</script>
<!--更新-->
<script type="text/javascript">
	function updateKhData(id,khbm,khmc,lxfs,fzr,khdz,khyb,khdj,bz) {
		document.getElementById("uup").reset();
		$("#user_id").val(id);
		$("#user_username").val(uname);
		$("#user_name").val(name);
		$("#user_position").val(position);
		$("#user_email").val(email);
		$("#user_hiredate").val(hiredate);
		var age_ = document.getElementById("age"+age);
		age_.selected = 'selected';
		
		$('#up').removeClass("hidden");
		userModel = layer.open({
			type : 1,
			shade : [ 0.5 ],
			title : '角色更新', //不显示标题
			area : [ '40%', '60%' ], //显示空间
			content : $('#up'), //捕获的元素
			btn : [ '更新', '取消' ],
			yes : function(index, layero) { //或者使用btn1
				var username = document.getElementById("user_username").value;
				var name = document.getElementById("user_name").value;
				var dept = document.getElementById("areaid").value;
				var role = document.getElementById("townid").value;
				var position = document.getElementById("user_position").value;
				var hiredate = document.getElementById("user_hiredate").value;
				var email = document.getElementById("user_email").value;
				errorMsg(role);
				if(khmc==""){
					errorMsg("客户名不能为空");
					return false;
				}
				if(lxfs==""){
					errorMsg("客户联系方式不能为空");
					return false;
				}
				if(fzr==""){
					errorMsg("客户负责人不能为空");
					return false;
				}
				if(khdz==""){
					errorMsg("客户地址不能为空");
					return false;
				}
				if(khyb==""){
					errorMsg("客户邮编不能为空");
					return false;
				}
				var ybreg = /^[1-9]\d{5}$/
				if(!ybreg.test(khyb)){
					errorMsg("请输入正确的邮编");
					return false;
				}
				if(khdj==""){
					errorMsg("客户等级手动选择");
					return false;
				}
				$.post("khsjgl/update", $("#uup").serialize(), function(data) {
					if(data=="fail"){
						errorMsg("该用户名已存在，请重新输入");
						//return false;
					}else{
						layer.close(index);
						$('#up').addClass("hidden");
						pageChange(1);
						layer.msg("修改成功");
					}
				});
			},
			cancel : function(index) {
				layer.close(index);
				$('#up').addClass("hidden"); //取消继续隐藏
				layer.msg("已取消");
			},
		});
	};
	
	function deleteKh(id){
	layer.confirm('是否确定删除此用户？', {btn : [ '确定', '取消' ]}, function() {
		$.post("khsjgl/deleteById",{"id":id}, function() {
			layer.msg("已删除");
			pageChange(1);
		});
	}, function() {
		layer.msg("已取消");
	});
}

</script>
<!--分页查询-->
<script type="text/javascript">
	var sel=document.getElementById("sel");
	    sel.onchange=function(){
		$.post("khsjgl/fanye", {"infNumber" :sel.options[sel.selectedIndex].value}, function(data) {
			pageChange(1);							
		});
    }
</script>